
<template>
  <div>
    <div style="text-align: right">
      <el-button @click="insertWork" type="primary" style="margin-left: 16px;">点击插入</el-button>
      <el-button @click="drawer = true" type="primary" style="margin-left: 16px;">点击查询</el-button>
    </div>
    <div>
      <el-table
          :data="tableDataUse"
          style="width: 100%">
        <el-table-column type="expand">
          <template v-slot:default="props">
            <el-form label-position="left" inline class="demo-table-expand">
              <el-form-item label="工作计划：">
                <div v-html="props.row.projectPlan"></div>
                <el-link type="primary" @click="editContent(props,1)">编辑</el-link>
              </el-form-item>
              <el-form-item label="工作进展：">
                <div v-html="props.row.progress"></div>
                <el-link type="primary" @click="editContent(props,2)">编辑</el-link>
              </el-form-item>
              <el-form-item label="留 言 栏：" style="margin: 0">
                <div v-html="props.row.messageUse"></div>
                <el-link type="primary" @click="editContent(props,3)">编辑</el-link>
              </el-form-item>
              <el-form-item label="其他项目：">
                <div class="parent-div">
                  <div class="child-div">
                    <span>责任部门：</span>
                    <span>{{props.row.department.split('/')[0]}}</span>
                    &nbsp;&nbsp;&nbsp;
                    <el-link type="primary" @click="editContent(props,11)" style="text-align: right">
                      <i class="el-icon-edit"></i>
                    </el-link>
                  </div>
                  <div class="child-div">
                    <span>二次责任分配人：</span>
                    <span>{{props.row.proposePersonTow}}</span>
                  </div>
                </div>
                <div class="parent-div">
                  <div class="child-div">
                    <span>类型分类：</span>
                    <span>{{props.row.type1}}</span>

                  </div>
                  <div class="child-div">
                    <span>工作得分：</span>
                    <span>{{props.row.score}}</span>
                    &nbsp;&nbsp;&nbsp;
                    <el-link type="primary" @click="editContent(props,12)" style="text-align: right">
                      <i class="el-icon-edit"></i>
                    </el-link>
                  </div>
                </div>
                <div>
                  <span>&nbsp;&nbsp;效果评价：</span>
                  <span>{{props.row.effect}}</span>
                  &nbsp;&nbsp;&nbsp;
                  <el-link type="primary" @click="editContent(props,13)" style="text-align: right">
                    <i class="el-icon-edit"></i>
                  </el-link>
                </div>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column
            prop="project"
            label="项目名称"
            width="180"
            v-slot:default="props">
          <span>{{props.row.project}}</span>&nbsp;&nbsp;
          <el-link type="primary" @click="editContent(props,4)" style="text-align: right">
            <i class="el-icon-edit"></i>
          </el-link>
        </el-table-column>
        <el-table-column
            prop="requestTime"
            label="需求完成时间"
            v-slot:default="props">
          <span>{{props.row.requestTime}}</span>&nbsp;&nbsp;&nbsp;
          <el-link type="primary" @click="editContent(props,5)" style="text-align: right">
            <i class="el-icon-edit"></i>
          </el-link>
        </el-table-column>
        <el-table-column
            prop="planTime"
            label="计划完成时间"
            v-slot:default="props">
          <span>{{props.row.planTime}}</span>&nbsp;&nbsp;&nbsp;
          <el-link type="primary" @click="editContent(props,6)" style="text-align: right">
            <i class="el-icon-edit"></i>
          </el-link>
        </el-table-column>
        <el-table-column
            prop="endTime"
            label="实际完成时间"
            v-slot:default="props">
          <span>{{props.row.endTime}}</span>&nbsp;&nbsp;&nbsp;
          <el-link type="primary" @click="editContent(props,7)" style="text-align: right">
            <i class="el-icon-edit"></i>
          </el-link>
        </el-table-column>
        <el-table-column
            prop="projectPerson"
            label="负责人"
            v-slot:default="props">
          <span>{{props.row.projectPerson}}</span>&nbsp;&nbsp;&nbsp;
          <el-link type="primary" @click="editContent(props,8)" style="text-align: right">
            <i class="el-icon-edit"></i>
          </el-link>
        </el-table-column>
        <el-table-column
            prop="projectPersonTow"
            label="第二责任人"
            v-slot:default="props">
          <span>{{props.row.projectPersonTow}}</span>&nbsp;&nbsp;&nbsp;
          <el-link type="primary" @click="editContent(props,9)" style="text-align: right">
            <i class="el-icon-edit"></i>
          </el-link>
        </el-table-column>
        <el-table-column
            prop="proposePerson"
            label="工作安排人"
            v-slot:default="props">
          <span>{{props.row.proposePerson.split('-')[0]}}</span>&nbsp;&nbsp;&nbsp;
        </el-table-column>
        <el-table-column
            prop="result"
            label="是否完成"
            v-slot:default="props">
          <span>{{props.row.result}}</span>&nbsp;&nbsp;&nbsp;
          <el-link type="primary" @click="editContent(props,10)" style="text-align: right">
            <i class="el-icon-edit"></i>
          </el-link>
        </el-table-column>
      </el-table>
    </div>

    <!--弹窗放置区-->
    <!--单击问题编辑区的弹窗，需要富文本区域的地方使用-->

    <el-dialog
        :title="titleUse"
        :visible.sync="dialogVisible"
        width="60%"
        :before-close="handleClose">
      <div style="text-align: left;font-size: 16px;color: red;margin-top: 10px">上一次内容为：</div>
      <div v-html="titleBefore" style="text-align: left;margin-top: 10px"></div>
      <div style="text-align: left;font-size: 16px;color: red;margin-top: 10px">本次编辑区：</div>
      <div ref="editorContainer" style="text-align: left;margin-top: 10px"></div>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="saveEditProject">确 定</el-button>
  </span>
    </el-dialog>
    <!--单击问题编辑区的弹窗，需要一个输入文本内容的地方-->
    <el-dialog
        :title="titleUse"
        :visible.sync="dialogVisibleStr"
        width="30%"
        :before-close="handleClose">
      <div style="text-align: left;font-size: 16px;color: red;margin-top: 10px">上一次内容为：</div>
      <div v-html="titleBefore" style="text-align: left;margin-top: 10px"></div>
      <div style="text-align: left;font-size: 16px;color: red;margin-top: 10px">本次编辑区：</div>
      <el-input type="textarea"
                :rows="3"
                placeholder="请输入内容" v-model="inputStr" style="width: 100%;margin-top: 10px"></el-input>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisibleStr = false">取 消</el-button>
    <el-button type="primary" @click="saveEditProject">确 定</el-button>
  </span>
    </el-dialog>
    <!--单击问题编辑区的弹窗，需要一个输入文本日期的地方-->
    <el-dialog
        :title="titleUse"
        :visible.sync="dialogVisibleDate"
        width="30%"
        :before-close="handleClose">
      <el-date-picker
          v-model="valueDate"
          type="date"
          placeholder="选择日期">
      </el-date-picker>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisibleDate = false">取 消</el-button>
    <el-button type="primary" @click="saveEditProject">确 定</el-button>
  </span>
    </el-dialog>
    <!--单击问题编辑区的弹窗，选择是，否结题的区域-->
    <el-dialog
        :title="titleUse"
        :visible.sync="dialogVisibleYes"
        width="30%"
        :before-close="handleClose">
      <el-switch
          v-model="valueYes"
          active-text="是"
          inactive-text="否">
      </el-switch>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisibleYes = false">取 消</el-button>
    <el-button type="primary" @click="saveEditProject">确 定</el-button>
  </span>
    </el-dialog>
    <!--单击问题编辑区的弹窗，选择部门的区域-->
    <el-dialog
        :title="titleUse"
        :visible.sync="dialogVisibleSel"
        width="30%"
        :before-close="handleClose">
      <el-select v-model="valueSel" placeholder="请选择">
        <el-option
            v-for="item in optionsD"
            :key="item.value"
            :label="item.label"
            :value="item.value">
        </el-option>
      </el-select>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisibleYes = false">取 消</el-button>
    <el-button type="primary" @click="saveEditProject">确 定</el-button>
  </span>
    </el-dialog>
    <!--单击问题编辑区的弹窗，需要一个输入数据的地方使用-->
    <el-dialog
        :title="titleUse"
        :visible.sync="dialogVisibleNub"
        width="30%"
        :before-close="handleClose">
      <el-input-number label="请输入数量" v-model="inputNub"></el-input-number>
      <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisibleNub = false">取 消</el-button>
    <el-button type="primary" @click="saveEditProject">确 定</el-button>
  </span>
    </el-dialog>

    <!--抽屉的展示区-->
    <el-drawer
        title="查询栏"
        :visible.sync="drawer"
        :direction="direction"
        size="20%">
      <div style="margin-top: 10px;margin-left: 10px;margin-right: 10px">
        <el-button @click="queryUse(1)" type="info" plain style="width: 100%;" :style="background1">查询所有</el-button>
      </div>
      <div style="margin-top: 10px;margin-left: 10px;margin-right: 10px">
        <el-button @click="queryUse(2)" type="info" plain style="width: 100%;" :style="background2">查询我的</el-button>
      </div>

    </el-drawer>
  </div>
</template>

<script>
import E from "wangeditor";

export default {
  name: "workProjectPojo",
  data() {
    return {
      //弹窗用，选择部门
      optionsD: [{
        value: '品质管理科/Quality Management Department/Секция управления качеством',
        label: '品质管理科/Quality Management Department/Секция управления качеством'
      }, {
        value: '装配车间/Assembly workshop/сборочный цех',
        label: '装配车间/Assembly workshop/сборочный цех'
      }, {
        value: '机加车间/Machining workshop/Машиностроительный цех',
        label: '机加车间/Machining workshop/Машиностроительный цех'
      },{
        value: '物流科/Logistics Department/Отдел логистики',
        label: '物流科/Logistics Department/Отдел логистики'
      }],

      activeName: 'first',
      // 自己用的变量列表变量
      tableDataUse: this.tableData,

      //抽屉的展示区
      drawer: false,
      direction: 'rtl',

      //富文本用到的变量
      editor:null,

      //弹窗部分的变量
      //标题显示内容
      titleUse:'',
      //富文本编辑器的弹窗显示
      dialogVisible:false,
      //编辑文本内容的弹窗显示
      dialogVisibleStr:false,
      //编辑时间格式日期的文本显示
      dialogVisibleDate:false,
      //编辑“是否”两个选项
      dialogVisibleYes:false,
      //选择部门用
      dialogVisibleSel:false,
      //输入数据的地方
      dialogVisibleNub:false,
      // 标题显示以前的文本
      titleBefore:'',
      //接收用户的文本内容
      inputStr:'',
      //接收用户的文本日期格式
      valueDate:'',
      //用户选择的是否
      valueYes:'',
      //选择部门用的变量
      valueSel:'',
      //用户输入的数据
      inputNub:'',



      //查询的按钮样式的变量
      background1: '',
      background2: '',

      //记录查询类型的变量
      queryDoe: 1,
      //记录用户编辑的是什么的变量
      EditDoe:0,
      //编辑的时候的临时变量
      tableDataTemp:{},
      //编辑是，用户选择的总列表中的索引值
      editIndex:-1,
    }
  },
  props:['tableData','userName','userNmb','userPurview'],
  methods: {
    //富文本编辑器的相关函数
    // 初始化 wangEditor
    initEditor() {
      // 检查是否已经存在编辑器实例
      if (this.editor) {
        return; // 如果已经存在，则直接返回，不重复初始化
      }
      this.editor = new E(this.$refs.editorContainer);
      this.editor.config.menus = [
        'head',
        'bold',
        'italic',
        'underline',
        'strikeThrough',
        'foreColor',
        'backColor',
        'list',
        'justify',
        'table',
        // 其他你需要的菜单...
      ]
      this.editor.create();
    },
    //弹框的关闭提示
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(_ => {
            console.log(_)
            done();
            if (this.editor) {
              this.editor.destroy();
              this.editor = null;
            }
          })
          .catch(_ => {
            console.log(_)
          });
    },
    //点击后，向后端发送一个空的工作项目，插入后可以供编辑
    insertWork() {
      let tempWork = {
        //工作名称
        project: '请编辑',
        //项目计划
        projectPlan: '请编辑',
        //进展
        progress: '请编辑',
        //要求完成时间
        requestTime: '请编辑',
        //计划完成时间
        planTime: '请编辑',
        //实际完成时间
        endTime: '请编辑',
        //负责人
        projectPerson: '请编辑',
        //责任科室
        department: '请编辑',
        //第二责任人
        projectPersonTow: '请编辑',
        //完成得分
        score: 0,
        //工作安排人
        proposePerson: this.userName+'-'+this.userNmb,
        //第二责任人安排人
        proposePersonTow: '请编辑',
        //效果评价
        effect: '请编辑',
        //工作来源类型
        type1: '防错管理',
        //是否结题
        result: '否',
        //留言栏
        messageUse: '请编辑',
      }
      //向后端发送请求，进行数据插入
      this.$request.post('/insertWorkOne', tempWork).then(result => {
        if (result.code === 401) {
          this.$router.push('UserLogin')
          alert("您未登录，请登录")
        } else {
          alert("已经插入成功")
          //更新数据
          this.queryUse(this.queryDoe)
        }
      })
    },
    //点击查询按钮做的反应
    queryUse(doe) {
      this.queryDoe = doe
      if (doe === 1) {
        //查询出所有的数据
        this.$request.post('/queryAll').then(result => {
              if (result.code === 401) {
                this.$router.push('UserLogin')
                alert("您未登录，请登录")
              } else {
                this.tableDataUse = result.data
              }
            }
        )
      }
    },

    //内部编辑内容的函数
    editContent(props, doe) {
      this.EditDoe=doe
      this.tableDataTemp=props.row
      this.editIndex=props.$index
      if (this.EditDoe===1){
        this.titleUse='您正在编辑《工作计划》'
        this.dialogVisible=true
        this.titleBefore=this.tableDataTemp.projectPlan
        //调用富文本编辑器
        this.$nextTick(() => {
          this.initEditor();
          this.editor.txt.html(this.tableDataTemp.projectPlan)
        })
      }
      else if (this.EditDoe===2){
        this.titleUse='您正在编辑《工作进展》'
        this.dialogVisible=true
        this.titleBefore=this.tableDataTemp.progress
        //调用富文本编辑器
        this.$nextTick(() => {
          this.initEditor();
          this.editor.txt.html(this.tableDataTemp.progress)
        })
      }
      else if (this.EditDoe===3){
        this.titleUse='您正在编辑《留言栏》'
        this.dialogVisible=true
        this.titleBefore=this.tableDataTemp.messageUse
        //调用富文本编辑器
        this.$nextTick(() => {
          this.initEditor();
          this.editor.txt.html(this.tableDataTemp.messageUse)
        })
      }
      else if (this.EditDoe===4){
        this.titleUse='您正在编辑《工作项目名称》'

        this.titleBefore=this.tableDataTemp.project
        //调用普通文本编辑器
        this.dialogVisibleStr=true
      }
      else if (this.EditDoe===5){
        this.titleUse='您正在编辑《需求完成时间》'
        //调用普通日期格式文本编辑器
        this.dialogVisibleDate=true
      }
      else if (this.EditDoe===6){
        this.titleUse='您正在编辑《计划完成时间》'
        //调用普通日期格式文本编辑器
        this.dialogVisibleDate=true
      }
      else if (this.EditDoe===7){
        this.titleUse='您正在编辑《实际完成时间》'
        //调用普通日期格式文本编辑器
        this.dialogVisibleDate=true
      }
      else if (this.EditDoe===8){
        this.titleUse='您正在编辑《负责人》'
        this.titleBefore=this.tableDataTemp.projectPerson
        //调用普通文本编辑器
        this.dialogVisibleStr=true
      }
      else if (this.EditDoe===9){
        this.titleUse='您正在编辑《第二负责人》'

        this.titleBefore=this.tableDataTemp.projectPersonTow
        //调用普通文本编辑器
        this.dialogVisibleStr=true
      }
      else if (this.EditDoe===10){
        this.titleUse='您正在编辑《是否结题》'
        //调用普通文本编辑器
        this.valueYes=false
        this.dialogVisibleYes=true
      }
      else if (this.EditDoe===11){
        this.titleUse='您正在编辑《责任部门》'
        this.dialogVisibleSel=true
      }
      else if (this.EditDoe===12){
        this.titleUse='您正在编辑《评价打分》'
        this.dialogVisibleNub=true
      }
      else if (this.EditDoe===13){
        this.titleUse='您正在编辑《效果评价》'
        this.titleBefore=this.tableDataTemp.effect
        //调用普通文本编辑器
        this.dialogVisibleStr=true
      }
    },
    //向后端发请求，修改字段
    saveJava(idUse, field, val) {
      this.$request.post('/saveWorkProjectOne', {idUse, field, val}).then(result => {
        if (result.code === 401) {
          this.$router.push('UserLogin')
          alert("您未登录，请登录")
        } else {
          alert("保存成功")
          //修改数据,列表中的数据
          this.tableDataTemp[field] = val
          //修改数据，总表的数据
          this.tableDataUse[this.editIndex][field]=val
        }
      })
    },
    saveJavaDate(idUse, field, val) {
      //需要把数据处理，处理为yyyy-mm-dd格式的日期
      const date = new Date(val);
      const year = date.getFullYear().toString().padStart(4, '0');
      const month = (date.getMonth() + 1).toString().padStart(2, '0'); // 月份从0开始，所以需要+1
      const day = date.getDate().toString().padStart(2, '0');
      val = `${year}-${month}-${day}`

      this.$request.post('/saveWorkProjectOne', {idUse, field, val}).then(result => {
        if (result.code === 401) {
          this.$router.push('UserLogin')
          alert("您未登录，请登录")
        } else {
          alert("保存成功")
          //修改数据,列表中的数据
          this.tableDataTemp[field] = val
          //修改数据，总表的数据
          this.tableDataUse[this.editIndex][field]=val
        }
      })
    },
    saveJavaNmb(idUse, field, val) {
      this.$request.post('/saveWorkProjectOneNmb', {idUse, field, val}).then(result => {
        if (result.code === 401) {
          this.$router.push('UserLogin')
          alert("您未登录，请登录")
        } else {
          alert("保存成功")
          //修改数据,列表中的数据
          this.tableDataTemp[field] = val
          //修改数据，总表的数据
          this.tableDataUse[this.editIndex][field]=val
        }
      })
    },
    //点击编辑内容提交做的函数
    saveEditProject(){
      if (this.EditDoe===1){
          //向后端发送请求，修改字段
        this.saveJava(this.tableDataTemp.id,'projectPlan',this.editor.txt.html())
        this.dialogVisible=false
      }
      else if (this.EditDoe===2){
        this.saveJava(this.tableDataTemp.id,'progress',this.editor.txt.html())
        this.dialogVisible=false
      }
      else if (this.EditDoe===3){
        this.saveJava(this.tableDataTemp.id,'messageUse',this.editor.txt.html())
        this.dialogVisible=false
      }
      else if (this.EditDoe===4){
        this.saveJava(this.tableDataTemp.id,'project',this.inputStr)
        this.dialogVisibleStr=false
      }
      else if (this.EditDoe===5){
        console.log('到这里了')
        this.saveJavaDate(this.tableDataTemp.id,'requestTime',this.valueDate)
        this.dialogVisibleDate=false
      }
      else if (this.EditDoe===6){
        console.log('到这里了')
        this.saveJavaDate(this.tableDataTemp.id,'planTime',this.valueDate)
        this.dialogVisibleDate=false
      }
      else if (this.EditDoe===7){
        this.saveJavaDate(this.tableDataTemp.id,'endTime',this.valueDate)
        this.dialogVisibleDate=false
      }
      else if (this.EditDoe===8){
        this.saveJava(this.tableDataTemp.id,'projectPerson',this.inputStr)
        this.dialogVisibleStr=false
      }
      else if (this.EditDoe===9){
        this.saveJava(this.tableDataTemp.id,'projectPersonTow',this.inputStr)
        this.dialogVisibleStr=false
      }
      else if (this.EditDoe===10){
        let temp
        if (this.valueYes === true) {
          temp = '是'
        } else {
          temp = '否'
        }
        this.saveJava(this.tableDataTemp.id,'result',temp)
        this.dialogVisibleYes=false
      }
      else if (this.EditDoe===11){
        this.saveJava(this.tableDataTemp.id,'department',this.valueSel)
        this.dialogVisibleSel=false
      }
      else if (this.EditDoe===12){
        this.saveJavaNmb(this.tableDataTemp.id,'score',this.inputNub)
        this.dialogVisibleSel=false
      }
      else if (this.EditDoe===13){
        this.saveJava(this.tableDataTemp.id,'effect',this.inputStr)
        this.dialogVisibleStr=false
      }
    }


  },
  watch:{
    tableData(){
      this.tableDataUse=this.tableData
    }
  },
  mounted() {

  },
  beforeDestroy() {
    // 组件销毁前，销毁 wangEditor 实例
    if (this.editor) {
      this.editor.destroy();
      this.editor = null;
    }
  }
}
</script>

<style scoped>

/*列表用到的样式*/
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
.dialog-footer {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中（如果按钮不是单行的话）*/
  padding: 10px; /* 你可以根据需要调整内边距 */
}

.parent-div {
  /* 清除默认的margin和padding */
  margin-top: 0;
  padding: 0;
  /* 设置父div的显示方式和宽度 */
  display: flex;
  width: 500px;
}

.child-div {
  /* 使用flex布局让子div平分空间 */
  flex: 1;
  /* 清除默认的margin和padding */
  margin: 0;
  padding: 10px; /* 您可以根据需要设置内边距 */
  /* 添加边框（如果需要） */
}

</style>